<template>
  <div>
    <el-form v-if="isSuperAdmin" ref="form" :model="user" :rules="rules" label-width="100px" :class="'el-details ' + status" style="max-width: 800px">
      <el-form-item label="账号">
        <el-input v-model.trim="user.username" disabled />
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          value="超级管理员账号，不可修改"
          :autosize="{ minRows: 6, maxRows: 8 }"
          type="textarea"
          disabled
        />
      </el-form-item>
    </el-form>
    <el-form v-else ref="form" :model="user" :rules="rules" label-width="100px" :class="'el-details ' + status" style="max-width: 800px">
      <el-form-item label="账号">
        <el-input v-model.trim="user.username" disabled />
      </el-form-item>
      <el-form-item label="组织">
        <el-input v-model.trim="user.domainName" disabled />
      </el-form-item>
      <el-form-item label="部门">
        <el-input v-model.trim="user.projectName" disabled />
      </el-form-item>
      <el-form-item label="是否管理员">
        <el-input :value="user.adminStatus === true ? '是' : '否'" disabled />
      </el-form-item>
      <el-form-item label="姓名" prop="truename">
        <el-input v-model.trim="user.truename" :disabled="status === 'details'" />
      </el-form-item>
      <el-form-item label="电话" prop="mobile">
        <el-input v-model.trim="user.mobile" :disabled="status === 'details'" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model.trim="user.email" :disabled="status === 'details'" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          v-model="user.description"
          :autosize="{ minRows: 6, maxRows: 8 }"
          type="textarea"
          :disabled="status==='details'"
        />
      </el-form-item>
      <el-form-item label="最后一次登录">
        <el-input v-model.trim="user.lastLoginTime" disabled />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-input v-model.trim="user.createTime" disabled />
      </el-form-item>
      <el-form-item label="更新时间">
        <el-input v-model.trim="user.updateTime" disabled />
      </el-form-item>
      <el-form-item>
        <el-button v-if="status === 'details'" type="danger" @click="status = 'edit'">编辑</el-button>
        <div v-else>
          <el-button type="danger" @click="submit">保存</el-button>
          <el-button @click="status = 'details'">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { userEdit, userDetails } from '@/api/user'
import { validatePhoneTwo, validateEMail } from '@/utils/validate'
export default {
  data() {
    return {
      user: {
        id: null,
        username: ''
      },
      isSuperAdmin: false,
      rules: {
        mobile: [{ trigger: 'blur', validator: validatePhoneTwo }],
        email: [{ trigger: 'blur', validator: validateEMail }]
      },
      status: 'details'
    }
  },
  created() {
    const user = this.$store.getters.userInfo
    if (user.roles.indexOf('superAdmin') === 0) {
      this.user.id = user.id
      this.user.username = 'superAdmin'
      this.isSuperAdmin = true
      return
    }
    this.getUser()
  },
  methods: {
    getUser() {
      userDetails().then((resp) => {
        this.user = resp.data
        const user = this.$store.getters.userInfo
        if (!this.user.domainName) {
          this.user.domainName = user.domainName
        }
        if (!this.user.projectName) {
          this.user.projectName = user.projectName
        }
      })
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          const tempData = {
            truename: this.user.truename,
            mobile: this.user.mobile,
            email: this.user.email,
            description: this.user.description
          }
          userEdit(tempData).then(() => {
            this.$message({
              title: '提示',
              message: '编辑成功',
              type: 'success',
              duration: 2000
            })
            this.status = 'details'
            this.getUser(this.user.id)
          })
        }
      })
    }
  }
}
</script>
